<template>
  <HeaderCom />
  <div class="common-layout">
    <el-container>
      <el-main class="home-left">
        <el-card shadow="hover" v-for="(item, index) in blog" :key="index" :body-style="{ padding: '0px' }">
          <div v-if="index % 2 == 0" class="blog-card" :body-style="{ padding: '0px' }">
            <el-link :underline="false" @click="Article(item.blog_id)">
              <div class="blog-card-image">
                <el-image :src="item.cover_image" alt="blog image" :title="item.blog_title"></el-image>
              </div>
            </el-link>
            <div class="blog-card-content">
              <div>
                <el-link :underline="false" @click="Article(item.blog_id)">
                  <h3 class="blog-card-title">{{ item.blog_title }}</h3>
                </el-link>
              </div>
              <div><el-link :underline="false" type="info" @click="Article(item.blog_id)">
                  <p class="blog-card-description" @click="Article(item.blog_id)">
                    {{ removeMarkdown(item.blog_content) }}
                  </p>
                </el-link>
              </div>
              <div class="blog-card-meta">
                <el-icon style="vertical-align: middle">
                  <Calendar />
                </el-icon>
                <span class="blog-card-date" style="vertical-align: middle">{{ item.create_time }}</span>
                <el-icon style="vertical-align: middle">
                  <List />
                </el-icon>
                <span style="vertical-align: middle">{{ item.type_name }}</span>
              </div>
            </div>
          </div>
          <div v-else class="blog-card" :body-style="{ padding: '0px' }">
            <div class="blog-card-content-right">
              <el-link :underline="false" @click="Article(item.blog_id)">
                <h3 class="blog-card-title">{{ item.blog_title }}</h3>
              </el-link>
              <div><el-link :underline="false" type="info" @click="Article(item.blog_id)">
                  <p class="blog-card-description" @click="Article(item.blog_id)">
                    {{ removeMarkdown(item.blog_content) }}
                  </p>
                </el-link>
              </div>
              <div class="blog-card-meta">
                <el-icon style="vertical-align: middle">
                  <Calendar />
                </el-icon>
                <span class="blog-card-date" style="vertical-align: middle">{{ item.create_time }}</span>
                <el-icon style="vertical-align: middle">
                  <List />
                </el-icon>
                <span style="vertical-align: middle">{{ item.type_name }}</span>
              </div>
            </div>
            <el-link :underline="false" @click="Article(item.blog_id)">
              <div class="blog-card-image-right">
                <el-image :src="item.cover_image" alt="blog image" :title="item.blog_title"></el-image>
              </div>
            </el-link>
          </div>

        </el-card>

      </el-main>
      <el-main class="home-right">
        <el-card class="personal-card">
          <div class="avatar-wrapper">
            <el-avatar :size="100" :src="User.avatar"></el-avatar>
          </div>
          <div class="info-wrapper">
            <h2 class="username">{{ User.nickname }}</h2>
            <div class="counts-wrapper">
              <div class="count-item">
                <i class="el-icon-tickets"></i>
                <p>文章</p>
                <p>{{ BlogCounts.blogCount }}</p>
              </div>
              <div class="count-item">
                <i class="el-icon-folder"></i>
                <p>分类</p>
                <p>{{ BlogCounts.typeCount }}</p>
              </div>
              <div class="count-item">
                <i class="el-icon-collection-tag"></i>
                <p>标签</p>
                <p>{{ BlogCounts.tagCount }}</p>
              </div>
            </div>
          </div>
        </el-card>
        <el-card shadow="hover" class="tianqi-card">
          <div class="tianqi-card-top">
            <div class="tianqi-card-top-WenDu">
              <span class="tianqi-card-top-WenDu-a">{{ tianqi.temp }}</span>
              <span class="tianqi-card-top-WenDu-b"><b>°C</b></span>
            </div>
            <div class="tianqi-card-top-wea">
              <span class="tianqi-card-top-WenDu-c">{{ tianqi.wea }}</span>
              <!-- <span class="tianqi-card-top-WenDu-d">空气{{ state.air_level }}</span> -->
            </div>
          </div>
          <div class="tianqi-card-bottom">
            <div class="">
              <span class="tianqi-card-bottom-a">{{ state.city }}</span>
            </div>
            <div class="tianqi-card-bottom-b">
              <span class="tianqi-card-bottom-b1">知你冷暖，在你身边</span>
              <div class="tianqi-card-bottom-b2">
                <span class="tianqi-card-bottom-b2-date">{{ state.ri }}</span>
                <span class="tianqi-card-bottom-b2-year">{{ state.nianyue }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import HeaderCom from "../components/HeaderCom.vue"
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from "vue-router"
import { getblog, weather, BlogCount, UserAvatar } from '../http/index';
import { Calendar, List } from '@element-plus/icons-vue'
const router = useRouter();
const state = reactive({
  names: 'xxxxx',

  city: '上海',
  ri: '',
  nianyue: '',

})
const tianqi = reactive({
  temp: 0,
  wea: ''
})
const blog = ref()
const BlogCounts = reactive({
  blogCount: 0,
  typeCount: 0,
  tagCount: 0,
})
const User = reactive({
  user_id: 0,
  nickname: '',
  avatar: ''
})
onMounted(async () => {
  let BlogReq = {
    blog_id: 0,
    type_id: 0
  }
  blog.value = (await getblog(BlogReq)).data.result
  var blogs = (await BlogCount()).data.result
  BlogCounts.blogCount = blogs.blogCount
  BlogCounts.typeCount = blogs.typeCount
  BlogCounts.tagCount = blogs.tagCount

  let UserReq = {
    user_id: 1,
  }
  var users = (await UserAvatar(UserReq)).data.result
  User.user_id = users.user_id
  User.nickname = users.nickname
  User.avatar = users.avatar
  let parms = {
    token: 'iKKllVcxrjA6zpJI',
    city: '上海'
  }
  var dataHours = (await weather(parms)).data.data.hour;
  for (let index = 0; index < dataHours.length; index++) {
    let element = dataHours[index];
    var oDate1 = new Date(element.time);
    var oDate2 = new Date();
    if (oDate1.getDate() == oDate2.getDate() && oDate1.getHours() == oDate2.getHours() + 1) {
      tianqi.temp = element.temp;
      tianqi.wea = element.wea;
    }
  }
  var dt = new Date();
  //年
  let year = dt.getFullYear();
  //月份是从0月开始获取的，所以要+1;
  let month = (dt.getMonth() + 1).toString().padStart(2, '0');
  state.nianyue = year + '/' + month;
  //日
  var d = dt.getDate().toString().padStart(2, '0');
  state.ri = d;
  /* increment(); */
})

function Article(id: number) {
  const { href } = router.resolve({ path: `/articleDetails/${id}` });
  window.open(href, "_blank")

}
/* function Article(id: number) {
    router.push({
        name: "articleDetails",
        params: { id: id }
    })
} */
/* function increment() {
  setInterval(function(){
      
    },3000);
} */
// 去除Markdown标题标记
const removeMarkdown = (text: string) => {
  return text
  .replace(/^#+\s*/, '')      // 去除开头的#号
    .replace(/```.*\n/g, '')    // 去除代码块语言标记
    .replace(/`{3}/g, '')       // 去除代码块标记
    .replace(/`/g, '')          // 去除行内代码标记
    .replace(/\*\*(.*?)\*\*/g, '$1')  // 去除粗体
    .replace(/\*(.*?)\*/g, '$1')      // 去除斜体
    .trim();         // 去除首尾空格
}




</script>
<style lang="scss" scoped>
.el-container {
  width: 70%;
  margin: 0 auto;
  padding-top: 1%;
}

.home-left {
  padding: 0px !important;
  width: 70%;

  .el-card {
    border-radius: 7px;
    margin-bottom: 15px;
    margin-right: 20px;
  }

  .blog-card {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .blog-card-image {
    margin-right: 20px;
    width: 270px;
    height: 150px;
    transition: all 0.6s;

  }

  .blog-card-image-right {
    width: 270px;
    height: 150px;
    margin-right: auto;
  }

  .blog-card-image-right img {
    width: 100%;
    height: 100%;

  }

  .blog-card-image img {
    width: 100%;
    height: 100%;

  }

  .blog-card-content {
    width: 100%;
    margin-right: 30px;
    // display: flex;
    // flex-direction: column;
    // justify-content: space-between;
  }

  .blog-card-content-right {
    width: 100%;
    margin-left: 30px;
    margin-right: 30px;
  }


  .blog-card-description {
    color: #898a8b;
    font-size: 11px;
    line-height: 20px;
    height: 40px;
    max-height: 40px;
    overflow: hidden;
    /* 超出的文本隐藏 */
    text-overflow: ellipsis;
    /* 溢出用省略号显示 */
    display: -webkit-box;
    /* 将对象作为弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical;
    /* 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数 */
    -webkit-line-clamp: 2;
    /*  从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
    margin: 15px 0px 15px 0px;
  }

  .blog-card-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #999999;
    font-size: 13px;
  }

  .blog-card-meta span {
    margin-right: 10px;
  }
}

.home-right {
  width: 180px;
  padding: 0px !important;

  .personal-card {
    width: 99%;
    margin: 0 auto;
    border-radius: 7px;
  }

  .avatar-wrapper {
    text-align: center;
    margin-bottom: 10px;
  }

  .info-wrapper {
    width: 70%;
    margin: 0 auto;
  }

  .username {
    text-align: center;
    margin-bottom: 30px;
  }

  .counts-wrapper {
    display: flex;
    justify-content: space-between;
  }

  .count-item {
    text-align: center;
  }

  .count-item i {
    font-size: 26px;
    color: #808080;
    margin-bottom: 5px;
  }

  .count-item p:first-of-type {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
  }

  .count-item p:last-of-type {
    font-size: 15px;
    font-weight: bold;
    color: #666;
  }


  .tianqi-card {
    margin-top: 10px;
    width: 99%;
    border-radius: 7px;

    .tianqi-card-top {
      display: flex;
      justify-content: flex-end;
      height: 59px;
      border-bottom: 1px solid rgb(220, 223, 230);

      .tianqi-card-top-WenDu-a {
        font-size: 40px;

      }

      .tianqi-card-top-WenDu-b {
        font-size: 16px;
        position: relative;
        bottom: 17px;
      }

      .tianqi-card-top-wea {
        margin-left: auto;
        /* display: flex;
        flex-direction: column; */
        font-size: 13px;
        margin-top: 28px;
      }
    }

    .tianqi-card-bottom {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
    }

    .tianqi-card-bottom-a {
      font-size: 18px;
    }

    .tianqi-card-bottom-b {
      margin-top: 5px;
      display: flex;
      justify-content: space-between;
    }

    .tianqi-card-bottom-b1 {
      font-size: 8px;
      color: rgb(219, 219, 219);
      margin-top: 31px;
    }

    .tianqi-card-bottom-b2 {
      display: flex;
      flex-direction: column;
    }

    .tianqi-card-bottom-b2-date {
      font-size: 24px;
      color: rgb(219, 219, 219);
      margin-left: 15px;
    }

    .tianqi-card-bottom-b2-year {
      font-size: 3px;
      color: rgb(219, 219, 219);
    }
  }


}
</style>
  